import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 导入样式，否则看不到效果

const myAxios = axios.create({
  baseURL: 'http://big-event-vue-api-t.itheima.net',
  timeout: 5000,
})

// 添加请求拦截器
myAxios.interceptors.request.use(
  function (config) {
    NProgress.start()
    // 在发送请求之前做些什么
    // 为请求头挂载 Authorization 字段
    // 登录和注册的时候不需要token，而且vuex里也没有token，有token的时候才会携带token，
    if (store.state.token) {
      config.headers.Authorization = store.state.token
    }

    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
myAxios.interceptors.response.use(
  function (response) {
    NProgress.done()
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 如果token过期，响应状态码为401，那么就清除token，强制跳到登录页
    if (error.response.status === 401) {
      // 无效的 token
      // 把 Vuex 中的 token 重置为空，并跳转到登录页面
      store.commit('updateToken', '')
      router.replace({ name: 'Login' })
      Message.error('用户身份过期！！')
    }
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default myAxios
